<template>
  <div class="content-outer">
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button v-permission:autoReply-add @click="add('新增')">新增</el-button>
        </div>
      </div>
      <div v-permission:autoReply-index class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:content="{ row }">
            <div v-if="row.type=='1'" class="rowFlex columnCenter">
              <svg-icon icon-class="text_icon" style="margin-right:5px;" /> <p>{{ row.content }}</p>
            </div>
            <div v-if="row.type=='2'">
              <el-image :src="row.content" style="width:100px;height:100px;"></el-image>
            </div>
          </template>
          <template v-slot:status="{ row }">
            <div class="colorStatus">
              <span v-if="row.pay_status=='0'" class="all">全部</span>
              <span v-if="row.pay_status=='1'" class="success">已支付</span>
              <span v-if="row.pay_status=='2'" class="indeter">未支付</span>
            </div>
          </template>
          <template v-slot:zip="{ row }">
            <el-button v-permission:autoReply-edit type="text" size="medium" @click="edit(row)">编辑</el-button>
            <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              style="margin-left:10px;"
              title="确定删除吗？"
              @confirm="delRow(row)"
            >
              <el-button
                slot="reference"
                v-permission:autoReply-del
                type="text"
                size="medium"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer v-model="drawer.visible" :row="drawer.row" :drawer-title="drawer.title" :component="drawerName.EditDrawer" drawer-size="45%" @ok="onSubmit"></BiDrawer>
  </div>
</template>

<script>
import BiDrawer from '@/components/BiDrawer'
import { auto_reply_index, auto_reply_save, auto_reply_del } from '@/api/autpReply'
import EditDrawer from './component/addReply.vue'
export default {
  name: 'AutoReplay',
  components: {
    BiDrawer
  },
  data() {
    return {
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      drawerName: {
        EditDrawer: EditDrawer
      },
      drawer: {
        visible: false,
        title: '新建收到消息回复',
        row: {}
      },
      tableColums: [
        {
          label: '小程序',
          prop: 'mini_app_name'
        },
        {
          label: '类型',
          prop: 'type_title'
        },
        {
          label: '内容',
          prop: 'content',
          slotScope: true
        },

        {
          prop: 'status',
          label: '支付状态',
          slotScope: true
        },
        {
          label: '创建人',
          prop: 'creator'
        },
        {
          label: '创建时间',
          prop: 'create_time'
        },
        {
          label: '操作',
          prop: 'zip',
          slotScope: true
        }
      ],
      tableData: []
    }
  },
  mounted() {
    this.requestList()
    this.$AccessReport.report('zhangyu-autoReply', [this.$store.state.user.routerItem.name, '自动回复'])
  },
  methods: {
    requestList() {
      auto_reply_index(this.page_info).then(res => {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      })
    },
    add(title) {
      this.drawer.title = title
      this.drawer.row = {}
      this.drawer.visible = true
    },
    edit(row) {
      this.drawer.title = '编辑'
      this.drawer.row = row
      this.drawer.visible = true
    },
    delRow(row) {
      auto_reply_del({ id: row.id }).then(res => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          setTimeout(() => {
            this.requestList()
          }, 200)
        }
      })
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.requestList()
    },
    onSubmit(data) {
      auto_reply_save(data).then(res => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.requestList()
        }
      })
    }
  }
}
</script>
<style></style>

<style lang="scss" scoped>
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
}
</style>
